<template>
  <drag-modal
    title="新增"
    :width="500"
    :visible="visible"
    :destroyOnClose="true"
    :confirmLoading="submitLoading"
    :maskClosable="false"
    @ok="ok"
    @cancel="cancel"
  >
    <a-spin :spinning="loading">
      <div style="max-height: 500px; overflow-y: auto;">
        <a-form-model :model="form" ref="form" :rules="validatorRules" :label-col="{span: 5}" :wrapperCol="{span: 16, offset: 1}">
          <div class="fold">
            <a-form-model-item
              label="菜单类型"
              prop="type"
            >
              <a-select allowClear v-model="form.type" :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
                <a-select-option v-for="item in dict.type" :key="item.key" :value="item.value">{{item.title}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item
              label="上级菜单"
              prop="parentId"
              :required="form.type == 2"
            >
              <a-tree-select
                show-search :filterTreeNode="filterTreeNode"
                v-model="form.parentId"
                style="width: 100%"
                :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
                :tree-data="parentTreeData"
                :tree-default-expand-all="true"
                :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}"
              >
               <span slot="title" slot-scope="{type, children, customTitle}">
                  <span v-if="type == 0 || (type == 1 && children)"><a-icon type="folder-open" /> {{customTitle}} </span>
                  <span v-else-if="type == 1 && !children"><a-icon type="folder" /> {{customTitle}} </span>
                  <span v-else-if="type == 2"><a-icon type="link" /> {{customTitle}} </span>
                  <span v-else><a-icon type="question-circle" /> {{customTitle}} </span>
                </span>
              </a-tree-select>
            </a-form-model-item>
            <a-form-model-item
              label="菜单名称"
              prop="name"
            >
              <a-input allowClear v-model="form.name" />
            </a-form-model-item>
            <a-form-model-item
              v-if="form.type != 2"
              label="菜单标识"
              prop="code"
            >
              <a-input allowClear v-model="form.code" />
            </a-form-model-item>
            <a-form-model-item
              v-if="form.type != 2"
              label="路由地址"
              prop="path"
            >
              <a-input allowClear v-model="form.path" />
            </a-form-model-item>
            <a-form-model-item
              label="权限标识"
              prop="permission"
            >
              <a-input allowClear v-model="form.permission" />
            </a-form-model-item>
            <a-form-model-item
              v-if="form.type != 2"
              label="组件路径"
              prop="component"
            >
              <a-input allowClear v-model="form.component" />
            </a-form-model-item>
<!--            <a-form-model-item
              v-if="form.type == 1"
              label="外链地址"
              prop="href"
            >
              <a-input allowClear v-model="form.href" />
            </a-form-model-item> -->
            <a-form-model-item
              v-if="form.type == 1"
              label="外链地址"
              prop="link"
            >
              <a-input allowClear v-model="form.link" />
            </a-form-model-item>
            <a-form-model-item
              v-if="form.type != 2"
              label="图标"
              prop="icon"
            >
              <a-input allowClear v-model="form.icon" />
            </a-form-model-item>
            <a-form-model-item
              label="排序"
              prop="sort"
            >
              <a-input allowClear v-model="form.sort" @change="(e) => form.sort = e.target.value.replace(/[^0-9]/g, '')" />
            </a-form-model-item>
            <a-form-model-item
              v-if="form.type != 2"
              label="是否隐藏"
              prop="invisible"
            >
              <a-select allowClear v-model="form.invisible" :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
                <a-select-option v-for="item in dict.yesOrNo" :key="item.key" :value="item.value">{{item.title}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item
              v-if="form.type == 1"
              label="不可关闭"
              prop="closable"
            >
              <a-select allowClear v-model="form.closable" :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
                <a-select-option v-for="item in dict.yesOrNo" :key="item.key" :value="item.value">{{item.title}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item
              label="系统菜单"
              prop="isSystem"
            >
              <a-select allowClear v-model="form.isSystem" :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
                <a-select-option v-for="item in dict.yesOrNo" :key="item.key" :value="item.value">{{item.title}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item
              label="状态"
              prop="status"
            >
              <a-select allowClear v-model="form.status" :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
                <a-select-option v-for="item in dict.status" :key="item.key" :value="item.value">{{item.title}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
    </a-spin>
  </drag-modal>
</template>

<script>
import {menuService} from '@/services'

export default {
  name: 'AddModal',
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      submitLoading: false,
      parentTreeData: [],
      form: {
        type: undefined,
        parentId: undefined,
        name: undefined,
        path: undefined,
        code: undefined,
        permission: undefined,
        component: undefined,
        link: undefined,
        href: undefined,
        icon: undefined,
        sort: undefined,
        status: undefined,
        invisible: undefined,
        closable: undefined,
        isSystem: undefined
      },
      validatorRules: {
        type: [
          { required: true, message: '请选择菜单类型', trigger: 'change' }
        ],
        parentId: [
          { message: '请选择上级机构', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入菜单标识', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入路由地址', trigger: 'blur' }
        ],
        permission: [
          { required: true, message: '请输入权限标识', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        invisible: [
          { required: true, message: '请选择是否隐藏', trigger: 'change' }
        ],
        isSystem: [
          { required: true, message: '请选择是否是系统菜单', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      },
      dict: {
        type: [],
        status: [],
        yesOrNo: []
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    ok() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          menuService.add(JSON.stringify(this.form)).then(res => {
            const result = res.data
            if (result.code === 200) {
              this.$emit('ok')
              this.$message.success(result.msg)
            }
          }).finally(this.submitLoading = false)
        }
      })
    },
    filterTreeNode(input, treeNode) {
      return treeNode.data.props.customTitle.includes(input)
    },
    queryParentAction(val) {
      this.loading = true
      menuService.queryParentTree().then(res => {
        const result = res.data
        if (result.code === 200) {
          this.parentTreeData = result.data
          this.form.parentId = val
        }
      }).finally(this.loading = false)
    }
  },
  mounted() {
    this.getDict(JSON.stringify({code: 'SYS_MENU_TYPE'})).then(res => this.dict.type = res.data.data)
    this.getDict(JSON.stringify({code: 'SYS_STATUS'})).then(res => this.dict.status = res.data.data)
    this.getDict(JSON.stringify({code: 'SYS_YES_OR_NO'})).then(res => this.dict.yesOrNo = res.data.data)
  }
}
</script>
